<template>
  <view>
    
    <view class="list">
      <view class="item" v-for="(item,index) in workList" :key="index" @click="gotoDetail(item.year + '-' + item.month)">
        <view class="item-head">
          <view class="item-head-left">
            <text class="iconfont icon-rili" style="font-size: 40rpx; margin-right: 20rpx;"></text>
            <view class="">{{item.year}}年{{item.month}}月考勤</view>
          </view>
          <view class="item-head-right">
            <view :class="item.status == 1 ? 'notTruered' : ''" style="text-align: right;">{{item.status == 0 ? '已确认' : '待确认'}}</view>
          </view>
        </view>
        <view class="item-bot">
          <view :class="item.status == 1 ? 'notTrueblue' : ''">查看考勤信息</view>
        </view>
      </view>
    </view>
    
  </view>
</template>

<script>
    import '@/static/common/iconfont.css'
  export default {
    data() {
      return {
        workList: [

        ]
      };
    },
    methods:{
      getworklist(){
        uni.$post(this.path + '/attendance/queryDateList').then(res => {
          let timeList = Object.keys(res.data).reverse()
          console.log("res.data.timeList.length:", res.data[timeList[0]]);
          for(let i = 0; i < timeList.length;i++){
            this.workList.push({
              status: res.data[timeList[i]],
              year: timeList[i].split('-')[0],
              month: timeList[i].split('-')[1],
            })
          }
        })
      },
      gotoDetail(time){
        uni.navigateTo({
          url:'./jobDetail?time=' + time + '&datetime=' + time + '-' + '00'
        })
      }
    },
    created() {
      this.getworklist()
    },
  }
</script>

<style lang="scss">
  .notTrueblue{
    color: #055dfe !important;
  }
  .notTruered{
    color: #ec2626 !important;
  }
  
  .list{
    .item{
      background-color: #fff;
      padding: 10rpx;
      margin: 30rpx 20rpx;
      border-radius: 20rpx;
      font-size: 34rpx;
      .item-head{
        .item-head-left{
          display: flex;
          align-items: center;
          color: #7f91ab;
        }
        .item-head-right{
          color: #bdbdbd;
        }
        display: flex;
        align-items: center;
        padding: 20rpx;
        justify-content: space-between;
      }
      .item-bot{
        margin-left: 80rpx;
        padding-bottom: 20rpx;
        font-size: 30rpx;
        color: #bdbdbd;
      }
    }
  }
  
  page{
    background-color: #f6f9fc;
  }
</style>
